<template>
  <div>
    <div style="display: flex;">
      <el-button class="insertProject" type="primary" @click="openCreateProject">新增
      </el-button>
      <el-button class="edit-duration" type="primary" @click="openEditDuration">修改工序
      </el-button>
      <div class="select">
        <el-select v-model="valueYear" placeholder="请选择">
          <el-option v-for="item in year" :key="item.value" :label="item.label" :value="item.value"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </div>
      <div class="title">
        <el-select v-model="valueStatus" placeholder="请选择" @change="changeStatus">
          <el-option v-for="item in Status" :key="item.value" :label="item.label" :value="item.value"
            :disabled="item.disabled">
          </el-option>
        </el-select>
      </div>
    </div>
    <el-table :data="newprojectData" stripe border style="width: 80%; margin: 30px auto 0;">
      <el-table-column prop="year" label="年份"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          {{ scope.row.status == 'ing' ? "未完成" : "已完成" }}
        </template>

      </el-table-column>
      <el-table-column prop="name" label="项目名"></el-table-column>
      <el-table-column prop="budget" label="预算费用"></el-table-column>
      <el-table-column prop="date" label="创建时间"></el-table-column>
      <el-table-column prop="cost" label="项目费用"></el-table-column>
      <el-table-column prop="type" label="工序"></el-table-column>
      <el-table-column prop="remark" label="描述"></el-table-column>
      <el-table-column label="操作" width="250px">
        <template slot-scope="scope">
          <el-button type="primary" @click="openEditProject(scope.row)">编辑
          </el-button>
          <el-button type="danger" @click="openDeleteProject(scope.row)">删除
          </el-button>
          <el-button type="info" @click="$router.push(`/project/${scope.row.id}`)">详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="新增项目" :visible="createProjectVisible" :show-close="false" width="30%">
      <el-form label-width="80px" :model="projectInfo">
        <el-form-item label="名称">
          <el-input v-model="projectInfo.name"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker v-model="projectInfo.date" align="right" type="date" placeholder="选择日期"
            value-format="yyyy-MM-dd" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="项目描述">
          <el-input v-model="projectInfo.remark"></el-input>
        </el-form-item>
        <el-form-item label="年份">
          <el-input v-model="projectInfo.year"></el-input>
        </el-form-item>
        <el-form-item label="预算">
          <el-input v-model="projectInfo.budget"></el-input>
        </el-form-item>
        <el-form-item label="费用">
          <el-input v-model="projectInfo.cost"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="createProjectVisible = false">取 消</el-button>
        <el-button type="primary" @click="createProject">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑项目" :visible="editProjectVisible" :show-close="false" width="50%">
      <el-form label-width="80px" :model="editProjectInfo">
        <el-row>
          <el-col :span=12> <el-form-item label="名称">
              <el-input v-model="editProjectInfo.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span=12>
            <el-form-item label="年份">
              <el-input v-model="editProjectInfo.year"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span=12>
            <el-form-item label="状态">
              <el-input v-model="editProjectInfo.status"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span=12>
            <el-form-item label="预计费用">
              <el-input v-model="editProjectInfo.budget"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span=12>
            <el-form-item label="项目费用">
              <el-input v-model="editProjectInfo.cost"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span=12>
            <el-form-item label="创建时间">
              <el-date-picker v-model="editProjectInfo.date" align="right" type="date" placeholder="选择日期"
                value-format="yyyy-MM-dd" :picker-options="pickerOptions">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="项目描述">
          <el-input v-model="editProjectInfo.remark"></el-input>
        </el-form-item>
        <el-form-item label="工序">
          <el-input v-for="type in types" v-model="type.name"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="editProjectVisible = false">取 消</el-button>
        <el-button type="primary" @click="editProject">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="删除详情" :visible="deleteProectVisible" :show-close="false" width="30%">
      <span>你确定要删除 <span style="color:red;font-weight: bold;">{{ projectInfo.name }}</span> 项目吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteProectVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteProject">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="修改工序" :visible="editDurationVisible" :show-close="false" width="40%">
      <el-form label-width="80px">
        <el-form-item label="工序">
          <el-input v-for="type in types" v-model="type.name"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDurationVisible = false">取 消</el-button>
        <el-button type="primary" @click="editDuration">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { api_updateType } from '@/api'


export default {
  data() {
    return {
      year: [{
        value: '2022',
      }, {
        value: '2023',
      }],
      Status: [{
        value: 'yes',
        label: '已完成'
      }, {
        value: 'ing',
        label: '未完成'
      },
      {
        value: 'whole',
        label: "全部"
      }],
      valueStatus: '',
      valueYear: '',
      projectData: [],
      newprojectData:[],
      projectInfo: {
        name: '',
        date: 0,
        remark: '',
        year: '',
        budget: '',
        cost: ''
      },
      editProjectInfo: {},
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date())
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          },
          {
            text: '一周前',
            onClick(picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', date)
            }
          }
        ]
      },
      types: [],
      createProjectVisible: false,
      deleteProectVisible: false,
      editProjectVisible: false,
      editDurationVisible: false
    }
  },
  methods: {
    /* 打开创建项目对话框 */
    openCreateProject() {
      let now = new Date()
      Object.keys(this.projectInfo).forEach(item => {
        this.projectInfo[item] = ''
      })
      this.projectInfo.date = now.getFullYear() + '-' + (now.getMonth() + 1) + '-' + now.getDate()
      this.createProjectVisible = true
    },
    /* 获取全部项目 */
    getAllProject() {
      this.$http.get('/admin/auth/getProject').then(res => {
        console.log(res)
        this.projectData = res.data.data
        this.newprojectData= this.projectData
      })
    },
    // 获取工序
    getTypes() {
      this.$http.get('/client/api/getType').then(res => {
        this.types = res.data.data
      })
    },
    createProject() {

      /* 表单验证，信息是否填写完全 */
      if (!this.projectInfo.name) {
        return this.$message({
          message: '请填写项目名',
          type: 'error'
        })
      }
      if (!this.projectInfo.date) {
        return this.$message({
          message: '请选择日期',
          type: 'error'
        })
      }
      if (!this.projectInfo.remark) {
        return this.$message({
          message: '请填写描述',
          type: 'error'
        })
      }
      this.$http.post('/admin/auth/createProject', this.projectInfo).then(res => {
        this.getAllProject()
        if (res.data.status == 200) {
          this.$message({
            type: 'success',
            message: res.data.message
          })
          this.createProjectVisible = false
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
    },
    openDeleteProject(project) {
      this.projectInfo = project
      this.deleteProectVisible = true
    },
    deleteProject() {
      this.$http.delete(`/admin/auth/deleteProject?id=${this.projectInfo.id}`).then(res => {
        if (res.data.status == 200) {
          this.$message({
            type: 'success',
            message: res.data.message
          })
          this.getAllProject()
          this.deleteProectVisible = false
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
    },
    openEditProject(data) {
      console.log(data)
      this.editProjectInfo = data
      this.editProjectVisible = true
      this.types = data.type.split(';').map(item => {
        return { name: item }
      })
    },
    editProject() {
      this.$http.post(`/admin/auth/updateProject`, {
        id: this.editProjectInfo.id,
        name: this.editProjectInfo.name,
        date: this.editProjectInfo.date,
        remark: this.editProjectInfo.remark,
        year: this.editProjectInfo.year,
        cost: this.editProjectInfo.cost,
        status: this.editProjectInfo.status,
        budget: this.editProjectInfo.budget,
        type: this.types
          .filter(item => item.name) // 过滤掉name属性为false的元素
          .map(item => item.name)    // 映射为name属性的值
          .join(';')              // 拼接为字符串
      }).then(res => {
        if (res.data.status == 200) {
          this.$message({
            type: 'success',
            message: res.data.message
          })
          this.editProjectVisible = false
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
        this.getAllProject()
      })
    },
    openEditDuration() {
      this.editDurationVisible = true
    },
    editDuration() {
      let str = ''
      this.types.forEach((item, index) => {
        //剔除item.name中的;符号
        item.name = item.name.replace(/;/g, '')
        if (item.name.trim()) {
          if (str) str += ';'
          str += item.name
        }
      })
      api_updateType(str).then(res => {
        if (res.status == 200) {
          this.$message({
            type: 'success',
            message: '修改工序'
          })
          this.editDurationVisible = false
        } else {
          this.$message({
            type: "error",
            message: res.message
          })
        }
      })
    },
    changeStatus() {
      console.log(this.valueStatus)
      if(this.valueStatus=='whole'){
        this.newprojectData=this.projectData
        return
      }
      this.newprojectData = this.projectData.filter((item) => {
        if(item.status == this.valueStatus){
          return item
        }
      })
    }
  },
  mounted() {
    this.getAllProject()
    this.getTypes()
  },
  watch: {
    types: {
      handler: function (val, oldVal) {
        if (val[val.length - 1].name) {
          this.types.push({ name: '' })
        }
      },
      deep: true
    }
  }
}
</script>

<style scoped lang="less">
.insertProject {
  height: 40px;
  margin: 20px 0 0 10%;
}

.select {
  margin-left: 50px;
  margin-top: 40px;
}

.edit-duration {
  height: 40px;
  margin: 20px 0 0 10%;
}

.title {
  margin-left: 50px;
  margin-top: 40px;
  width: 100px;
  height: 40px;

}
</style>
